<style>
  .previewer{
    height:100vh; 
    width:100vw; 
    position:fixed; 
    top:0; 
    left:0; 
    background-color:rgba(0,0,0,0.55); 
    z-index:12
  }
  .previewer .rel{
    height:100vh;
     width:100vw; 
     display: flex; 
     align-items: center; 
     position:relative
  }
  .previewer .rel .close{
    height:50px; 
    width:50px; 
    top:0; 
    right:0; 
    line-height:50px; 
    text-align:center; 
    position:absolute; 
    z-index:10; 
    color:#ffffff
  }
  .previewer img {
    margin: 0 auto; 
    width:90vw; 
    height:atuo; 
    align-items: center;
  }


</style>

<template>
    <div class="previewer" v-if="showPrev">
      <div class="rel">
        <div @click="close" class="close">
          <i class="iconfont icon-del-black"></i>
        </div>
        <img :src="prevItem.Url | simpleImgUrl" v-if="prevItem.Url">
        <img :src="prevItem.Base64" v-if="prevItem.Base64">
      </div>
    </div>
</template>

<script>
export default {
  props: {
    showPrev: {
      type: Boolean,
      default: false
    },
    imgType: {
      type: Number,
      default: 1
    },
    prevItem:{
      type: Object,
      default: function(){
        return {};
      }
    },
  },
  data(){
    return {
      
    }
  },
  methods: {
    close(){
      this.$emit("close");
    },
  },
  
  created() {
    
  },
};
</script>